<!DOCTYPE html>
<html id="home">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="yes" name="apple-touch-fullscreen" />
	<meta content="telephone=no,email=no" name="format-detection" />
	<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
	<link rel="stylesheet" type="text/css" href="./css/nav.min.css" />
	<link rel="stylesheet" type="text/css" href="./js/swiper/swiper-bundle.min.css" />
	<link rel="stylesheet" type="text/css" href="./js/datepicker/daterangepicker.css" />
	<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="./css/common.min.css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

	<title>Fubit LiveMall</title>
</head>

<body>
	<div id="preloader">
		<div class='preloader'>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<header id="header" class="nav-header">
		<div class="container-01">
				<div class="flex justify-between">
					<a class="logo" href="index.html" style="margin:8px 0;">
						<img class="" src="./images/live_logo.png" />
					</a>
					<div class="search-soso flex align-center">
						<div class="search-con flex align-center">
							<div class="search-text">
								<input id="search" placeholder="搜索" />
							</div>
							<div class="btnSearch">
								<i class="iconfont iconsousuo"></i>
							</div>

						</div>
					</div>
				</div>
		</div>
	</header>
	<section class="card no-padding">
		<div class="type-menu-wrap">
			<div class="container-01">
				<div class="swiper" style="width: 100%;">
					<div class="swiper-wrapper flex align-center">
						<div class="swiper-slide"><a class="btn menu-btn active">食物</a></div>
						<div class="swiper-slide"><a class="btn menu-btn">生活</a></div>
						<div class="swiper-slide"><a class="btn menu-btn">时尚</a></div>
						<div class="swiper-slide"><a class="btn menu-btn"> 美丽</a></div>
						<div class="swiper-slide"><a class="btn menu-btn"> 母婴</a></div>
						<div class="swiper-slide"><a class="btn menu-btn"> 3C电子</a></div>
						<div class="swiper-slide"><a class="btn menu-btn"> 商品</a></div>
					</div>
				</div>
		
			</div>
		</div>

		<div class="container-01 pt-20">
			<div class="search-wrap-1 flex align-center">
				<div class="search-area">
					<select name="" id="">
						<option>区域搜索</option>
						<option>台湾</option>
						<option>大陆</option>
						<option>波兰</option>
					</select>
				</div>
				<div class="search-date flex align-center">
					<i class="iconfont iconyanchurili"></i>
					<input id="dateRange" readonly="readonly" placeholder="日期范围搜索">
				</div>
			</div>
			<div class="live-list mt-20">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-2.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">2,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/fbit_logo.png"
													alt=""></span>
											<span class="live-source-discount">1%</span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-2.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">2,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/EC2_logo.png"
													alt=""></span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-2.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">2,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/EC2_logo.png"
													alt=""></span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-2.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">2,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/EC2_logo.png"
													alt=""></span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-3.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">2,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/EC2_logo.png"
													alt=""></span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-4.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">2,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/EC2_logo.png"
													alt=""></span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-6.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">2,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/EC2_logo.png"
													alt=""></span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
					<div class="swiper-slide">
						<div class="swiper-item-con">
							<a href="javascript:;">
								<div class="live-wrap">
									<div class="live-load">
										<img src="./images/loading.png" alt="">
									</div>
									<div class="live-body"><img src="./images/mock/pic-1.jpg" alt=""></div>
									<span class="live-head flex align-center">
										<i class="iconfont iconyanjing"></i>
										<span class="live-num">1,414 次观看</span>
									</span>
									<span class="live-buy flex align-center">
										<i class="iconfont icon24gf-bag"></i>
										<span class="live-buy-num">98,414 次购买</span>
									</span>
									<span class="live-foot">
										<div href="javascript:;" class="live-source flex align-center justify-end ">
											<span class="live-source-logo"><img src="./images/EC2_logo.png"
													alt=""></span>
										</div>
									</span>
								</div>
								<span class="muti-eps">
									明月几时有？把酒问青天不知天上宫阙,今夕是何年明月几时有？把酒问青天不知天上宫阙,今夕是何年
								</span>
							</a>
							<a class="live-shop flex align-center" href="javascript:;">
								<span class="live-shop-icon"><img src="./images/fbit_logo.png"></span>
								<span class="live-shop-name">琼楼玉宇</span>
							</a>

						</div>

					</div>
				</div>

			</div>
			<div class="more"><a class="">点击加载更多</a></div>
		</div>
	</section>


	<footer id="footer">
		<div class="top-footer">
			<div class="contact-flex">
				<div class="contact-wrap">
					<img src="./images/fbit_logo1.png" alt="">
					<h4 class="mt-20">直接註冊成為福幣商家</h4>
					<p class="btn-con"><a href="http://ec2.full2house.com/Ent/index.php?a=Login" target="_blank"
							class="btn btn-o-main">立即註冊</a></p>
					<p class="btn-con"><a href="contact.html" class="btn btn-main">聯絡我們</a></p>
				</div>
				<div class="">
					<form class="form pro">
						<div class="form-group flex align-center">
							<label class="control-label"><em>*</em> 姓名：</label>
							<div class="">
								<input name="name" type="text" class="form-control formname" value=""
									data-toggle="tooltip" data-placement="top" title="請輸入姓名">
							</div>
						</div>
						<div class="form-group flex align-center">
							<label class="control-label"><em>*</em> 電話：</label>
							<div class="">
								<input name="phone" type="text" class="form-control formphone" value=""
									data-toggle="tooltip" data-placement="top" title="請輸入正確電話">
							</div>
						</div>
						<div class="form-group flex align-center">
							<label class="control-label"><em>*</em> 郵箱：</label>
							<div class="">
								<input name="email" type="email" class="form-control formemail" value=""
									data-toggle="tooltip" data-placement="top" title="請輸入正確郵箱">
							</div>
						</div>
						<div class="form-group flex align-center">
							<label class="control-label">商品类别：</label>
							<div class="">
								<input name="email" class="form-control">
							</div>
						</div>
						<div class="form-group flex align-center">
							<label class="control-label">備註：</label>
							<div class="">
								<textarea name="desc" class="form-control"></textarea>
							</div>
						</div>
						<div class="form-group flex align-center mb-0">
							<label class="control-label"></label>
							<div class="" style="text-align: left;">
								<a class="btn btn-main" id="submitform" href="javascript:void(0);"><span
										class="btntext">提 交</span></a>
							</div>
						</div>

					</form>
				</div>

			</div>

		</div>
		<div class="footer-bottom">
			<ul class="mediacon">
				<li><a href="https://www.full2house.com/" target="_blank"><i class="iconfont iconfh"></i>
						<p>公司簡介</p>
					</a></li>
				<li><a href="mailto:fbit@full2house.com" target="_blank"><i class="iconfont iconyouxiang"></i>
						<p>客服信箱</p>
					</a></li>
				<li><a href="https://www.facebook.com/fubittw" target="_blank"><i
							class="iconfont iconicon_facebook"></i>
						<p>粉絲專頁</p>
					</a></li>
				<li><a href="https://www.facebook.com/groups/fubittw" target="_blank"><i
							class="iconfont iconrenyuan-"></i>
						<p>社团</p>
					</a></li>
			</ul>
			<h5><span class="home-rights__left">© Powered by Full2house Technology 2022</span><span><a
						href="privacy.html">隐私政策</a>|<a href="termsofservice.html">服务条款</a></span></h5>
		</div>
	</footer>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script src="./js/swiper/swiper-bundle.min.js"></script>
	<script type="text/javascript" src="./js/moment.min.js"></script>
	<script type="text/javascript" src="./js/datepicker/daterangepicker.min.js"></script>
	<script>
		setTimeout(function () {
			$('#preloader').fadeOut('slow', function () {
				$(this).remove();
			});
		}, 500);
		let typeScroll = new Swiper('.type-menu-wrap .swiper', {
			freeMode: true,
			mousewheel: true,
			slidesPerView: "auto",
			freeModeMomentumRatio: 0.5,
			on: {
				//当前swiper-slide点击时触发事件
				click: function (e) {
					var typeIndex = typeScroll.clickedIndex; // 当前点击按钮的下标
					$('.type-menu-wrap .swiper-slide').find('a').removeClass('active');
					$('.type-menu-wrap .swiper-slide').eq(typeIndex).find('a').addClass('active');
					let thisWidth = this.clickedSlide.offsetWidth;
					let thisLeft = this.clickedSlide.offsetLeft;
					let offsetX = this.width / 2 - thisLeft - thisWidth / 2;
					//偏移量在1/2视口内时，容器不发生偏移
					if (offsetX > 0) {
						offsetX = 0;
					}
					//offsetX小于容器最大偏移时，让偏移量等于容器最大的偏移量
					else if (offsetX < this.maxTranslate()) {
						offsetX = this.maxTranslate();
					}
					//设置容器的过渡动画
					this.setTransition(300);
					this.setTranslate(offsetX);
				}
			}
		});
		$(function () {
			$('#search').focus();
			$('.more a').click(function () {
				$(this).html('加载中...')
				$(this).addClass('is-disabled')
			})
			$("#dateRange").daterangepicker({
				opens: 'center',
				autoUpdateInput: false,
				"locale": {
					cancelLabel: "Clear",
				}

			});
			$('#dateRange').on('apply.daterangepicker', function (ev, picker) {
				$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format(
					'YYYY-MM-DD'));
			});
			$('#dateRange').on('cancel.daterangepicker', function (ev, picker) {
				$('#dateRange').val('');
			});
		})
	</script>
</body>

</html>